<template>
  <div style="width: 100%; height: 100%">
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>面试管理</span>
        <el-button type="danger" @click="deleteSelectedInterviews" style="float: right;">批量删除</el-button>
      </div>
      <!-- 搜索框和按钮 -->
      <el-input
          v-model="searchText"
          placeholder="请输入关键词进行搜索"
          style="width: 300px; margin-bottom: 10px;"
          @keyup.enter="handleSearch"
      ></el-input>
      <el-button type="primary" @click="handleSearch" style="margin-left: 10px;">搜索</el-button>


      <!-- 表格 -->
      <el-table :data="interviewList" ref="interviewTable" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="name" label="学生姓名"></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
        <el-table-column prop="phone" label="联系方式"></el-table-column>
        <el-table-column prop="job_title" label="职位标题"></el-table-column>
        <el-table-column prop="application_status" label="面试状态">
          <template slot-scope="scope">
            {{application_statusWacth(scope.row)}}
          </template>
        </el-table-column>
        <el-table-column label="面试安排">
          <template slot-scope="scope">
          <span v-if="scope.row.application_status==='shortlisted'">
            </span>
          <span v-else>
            <el-button  type="primary" size="small" plain @click="handwatch(scope.row)">查看面试安排</el-button>
          </span>
          </template>
        </el-table-column>
<!--        <el-table-column label="操作">-->
<!--          <template slot-scope="scope">-->
<!--            <el-button @click="scheduleInterview(scope.row)" type="primary" size="small">编辑</el-button>-->
<!--            <el-button @click="deleteInterview(scope.row)" type="danger" size="small">删除</el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column>-->
<!--          <template slot-scope="scope">-->
<!--            <el-button @click="sendNotification(scope.row)" type="success" size="small">发送通知</el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="scheduleInterview(scope.row)" type="primary" size="small">编辑</el-button>
            <el-button @click="deleteInterview(scope.row)" type="danger" size="small">删除</el-button>
            <el-button @click="sendNotification(scope.row)" type="success" size="small">发送通知</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 面试安排弹窗 -->
    <el-dialog title="安排面试" :visible.sync="dialogVisible">
      <el-form :model="form">
        <el-form-item label="学生ID" :label-width="formLabelWidth">
          <el-input v-model="form.student_id" disabled></el-input>
        </el-form-item>
        <el-form-item label="学生姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="职位ID" :label-width="formLabelWidth">
          <el-input v-model="form.job_id" disabled></el-input>
        </el-form-item>
        <el-form-item label="职位标题" :label-width="formLabelWidth">
          <el-input v-model="form.job_title" disabled></el-input>
        </el-form-item>
        <el-form-item label="状态 " :label-width="formLabelWidth">
          <el-select v-model="form.application_status"  placeholder="已入围">
            <el-option label="安排面试" value="uninterview"></el-option>
            <el-option label="已面试" value="interviewed"></el-option>
            <el-option label="已录用" value="accepted"></el-option>
            <el-option label="拒绝录用" value="rejected"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="面试日期" :label-width="formLabelWidth">
          <el-date-picker v-model="form.interview_date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="面试时间" :label-width="formLabelWidth">
          <el-time-picker v-model="form.interview_time" placeholder="选择时间" value-format="HH:mm:ss"></el-time-picker>
        </el-form-item>
        <el-form-item label="面试地点" :label-width="formLabelWidth">
          <el-input v-model="form.location"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="面试安排" :visible.sync="InnterDialogVisible" width="30%" >
      <el-form :model="InterItem" label-width="100px">
        <el-form-item label="地点" :label-width="formLabelWidth">
          <el-input v-model="InterItem.location" ></el-input>
        </el-form-item>
        <el-form-item label="面试日期" :label-width="formLabelWidth">
          <el-date-picker v-model="InterItem.interview_date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="面试时间" :label-width="formLabelWidth">
          <el-time-picker v-model="InterItem.interview_time" placeholder="选择时间" value-format="HH:mm:ss"></el-time-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="InnterDialogVisible = false">取消</el-button>
      </div>
    </el-dialog>


  </div>
</template>
<script>
import axios from 'axios';

export default {
  data() {
    return {
      interviewList: [],
      InterData:[],
      dialogVisible: false,
      dialogVisibleNew: false,
      InnterDialogVisible:false,
      form: {
        interview_id:'',
        student_id: '',
        student_name: '', // 确保前端表单包含学生姓名字段
        job_id: '',
        job_title: '', // 确保前端表单包含职位标题字段
        interview_date: '',
        interview_time: '',
        location: '',
        application_status:''
      },
      InterItem:{},
      formLabelWidth: '120px',
      selectedInterviews: [],
      searchText: ''
    };
  },
  methods: {
    application_statusWacth(row){
      if (row.application_status==='shortlisted'){
        return '已入围';
      }else{
        if (row.application_status==='interviewed'){
          return '已面试';
        }
        if (row.application_status==='accepted'){
          return '已录用';
        }
        if (row.application_status==='rejected'){
          return '拒绝录用';
        }
        if (row.application_status==='uninterview'){
          return '待面试';
        }
      }

    },
    handwatch(row) {
        let InterDta = this.InterData.filter(item => item.student_id === row.student_id && item.job_id===row.job_id);
        this.InterItem = InterDta[0]
        this.form.interview_id=this.InterItem.interview_id;
      console.log(this.form)
        this.InnterDialogVisible=true;
    },
    fetchInterviews() {
      axios.get('http://localhost:8080/interviews/all')
          .then(response => {
            this.interviewList = response.data.data.filter(item => item.company_id == localStorage.getItem('company_id'));
          })
          .catch(error => {
            this.$message.error('获取面试数据失败');
          });
      this.finAllInterData();
    },
    finAllInterData(){
      axios.get("http://localhost:8080/interviews/InterDataAll")
          .then(response=>{
            this.fetchInterviews()
            this.InterData=response.data.data;
              })
          .catch(error => {
            this.$message.error('获取面试数据失败');
          });
    },
    scheduleInterview(row) {
      this.form = Object.assign({}, row);
      this.form.interview_id=this.getItemById(this.form.student_id,this.form.job_id)
      this.dialogVisible = true;
    },
    getItemById(id,id2) {
      if(this.InterData.find(item=>item.student_id===id && item.job_id===id2)!==undefined){
        return this.InterData.find(item=>item.student_id===id&& item.job_id===id2).interview_id
      }else {
        return null
      }
    },

    CreateForm(ruleForm){
      console.log(ruleForm)
      let userExists = false;
      for (let Inter of this.InterData) {
        if (Inter.student_id ===ruleForm.student_id&& Inter.job_id===ruleForm.job_id) {
          userExists = true;
          this.updataInter(ruleForm);
          break;
        }
      }
      if(userExists===false) {
        axios.post('http://localhost:8080/interviews/create', this.form)
            .then(() => {
              this.dialogVisible = false;
              this.updataApply(ruleForm);
              this.fetchInterviews();
              this.$message({
                message: '面试安排已创建',
                type: 'success'
              });
            })
            .catch(error => {
              this.$message.error('创建面试失败');
            });
      }
    },
    sendNotification(row) {
      this.$notify({
        title: '通知',
        message: `已向学生ID ${row.student_id} 发送面试通知`,
        type: 'success'
      });
    },
    deleteInterview(row) {
      axios.delete(`http://localhost:8080/interviews/delete/${row.interview_id}`)
          .then(() => {
            this.fetchInterviews();
            this.$message({
              message: '面试已删除',
              type: 'success'
            });
          })
          .catch(error => {
            this.$message.error('删除面试失败');
          });
    },
    handleSelectionChange(val) {
      this.selectedInterviews = val.map(row => row.interview_id);
    },
    deleteSelectedInterviews() {
      axios.delete('http://localhost:8080/interviews/batch-delete', { data: this.selectedInterviews })
          .then(response => {
            this.fetchInterviews();
            this.$message({
              message: '选中的面试已删除',
              type: 'success'
            });
          })
          .catch(error => {
            this.$message.error('批量删除面试失败');
          });
    },
    updataInter(form){
      axios.put(`http://localhost:8080/interviews/update`, form)
          .then(() => {
            this.dialogVisible = false;
            this.updataApply(form)
            this.fetchInterviews();
            this.$message({
              message: '面试安排已更新',
              type: 'success'
            });
          })
          .catch(error => {
            this.$message.error('更新面试失败');
          });
    },
    updataApply(form){
      axios.put('http://localhost:8080/interviews/updateApp',form)
    },
    submitForm() {
      if (this.form.interview_id === null) {
       this.CreateForm(this.form);
      }else {
        this.updataInter(this.form)
      }
    },
    handleSearch() {
      if (this.searchText.trim() === '') {
        this.fetchInterviews(); // 如果搜索关键词为空，则重新获取所有面试数据
      } else {
        axios.get(`http://localhost:8080/interviews/search?keyword=${this.searchText}`)
            .then(response => {
              this.interviewList = response.data.data;
            })
            .catch(error => {
              this.$message.error('搜索面试失败');
            });
      }
    },
  },
  created() {
    this.fetchInterviews();
  }
};
</script>

<style scoped>
.box-card {
  margin: 20px;
}
</style>
